<template>
<div style="height:836px;width:100%;position: relative;z-index:0">
  <div id="container" class="map" :class="{mapclass: isall}"></div>
  <div :class="{mapbkg: isbkg}" style="height:836px;width:100%;top:0;position:absolute;z-index:2" v-if="isbkg"></div>
  <div class="mapbutton" :style="{top:btntop,right:btnright}" @click="setStyle">{{btntext}}</div>
</div>
</template>

<script>
/* eslint-disable */
import imgs from '../../../assets/images/pic--school.png'
// import linesData from './lines-data.json'
// import mapConfig from './map-config.json'
import * as L7 from '@antv/l7'
import { type } from 'os';

export default {
  name: 'tw-map',
  props: {
    zoom: {
      type: String,
      default: '8.5'
    }
  },
  data () {
    return {
      isbkg: false,
      btntop: '0px',
      btntext: '放大',
      btnright: '0px',
      amapGs: {},
      citys: {
        '上城区': {
          adcode: 330102,
          provCode: 330000,
          cityCode: 330100,
          level: 'district',
          lnglat: [120.171465, 30.250236],
          name: '上城区',
          prism: null,
          zoom:12,
          index: 0
        },
        '下城区': {
          adcode: 330103,
          provCode: 330000,
          cityCode: 330100,
          level: 'district',
          lnglat: [120.172763, 30.276271],
          name: '下城区',
          prism: null,
          zoom:12,
          index: 1
        },
        '江干区': {
          adcode: 330104,
          provCode: 330000,
          cityCode: 330100,
          level: 'district',
          lnglat: [120.202633, 30.266603],
          name: '江干区',
          prism: null,
          zoom:12,
          index: 2
        },
        '拱墅区': {
          adcode: 330105,
          provCode: 330000,
          cityCode: 330100,
          level: 'district',
          lnglat: [120.150053, 30.314697],
          name: '拱墅区',
          prism: null,
          zoom:13,
          index: 3
        },
        '西湖区': {
          adcode: 330106,
          provCode: 330000,
          cityCode: 330100,
          level: 'district',
          lnglat: [120.147376, 30.272934],
          name: '西湖区',
          prism: null,
          zoom:11,
          index: 4
        },
        '滨江区': {
          adcode: 330108,
          provCode: 330000,
          cityCode: 330100,
          level: 'district',
          lnglat: [120.21062, 30.206615],
          name: '滨江区',
          prism: null,
          zoom:12,
          index: 5
        },
        '萧山区': {
          adcode: 330109,
          provCode: 330000,
          cityCode: 330100,
          level: 'district',
          lnglat: [120.27069, 30.162932],
          name: '萧山区',
          prism: null,
          zoom:10,
          index: 6
        },
        '余杭区': {
          adcode: 330110,
          provCode: 330000,
          cityCode: 330100,
          level: 'district',
          lnglat: [120.301737, 30.421187],
          name: '余杭区',
          prism: null,
          zoom:11,
          index: 7
        },
        '富阳区': {
          adcode: 330111,
          provCode: 330000,
          cityCode: 330100,
          level: 'district',
          lnglat: [119.949869, 30.049871],
          name: '富阳区',
          prism: null,
          zoom:10,
          index: 7
        },
        '桐庐县': {
          adcode: 330122,
          provCode: 330000,
          cityCode: 330100,
          level: 'district',
          lnglat: [119.685045, 29.797437],
          name: '桐庐县',
          prism: null,
          zoom:10,
          index: 8
        },
        '淳安县': {
          adcode: 330127,
          provCode: 330000,
          cityCode: 330100,
          level: 'district',
          lnglat: [119.044276, 29.604177],
          name: '淳安县',
          prism: null,
          zoom:10,
          index: 9
        },
        '建德市': {
          adcode: 330182,
          provCode: 330000,
          cityCode: 330100,
          level: 'district',
          lnglat: [119.279089, 29.472284],
          name: '建德市',
          prism: null,
          zoom:10,
          index: 10
        },
        '临安区': {
          adcode: 330112,
          provCode: 330000,
          cityCode: 330100,
          level: 'district',
          lnglat: [119.715101, 30.231153],
          name: '临安区',
          prism: null,
          zoom: 10,
          index: 11
        }
      },
      curArea: '杭州市',
      isall: false
    }
  },
  created () {
    window.aaa = this
  },
  mounted () {
    this.initMap()
  },
  beforeDestroy () {
    let vm = this
    vm.amapGs && vm.amapGs.destroy()
    vm.amapGs = null
  },
  methods: {
    setStyle () {
      let vm = this
      if (vm.isall) {
        vm.zIndex = 1
        vm.isall = false
        vm.btntop = '0px'
        vm.btnright = '0px'
        vm.btntext = '放大'
        vm.$emit('showall', true)
        // vm.amap.setZoomAndCenter(9, [119.353576, 29.887459])
        vm.initMap()
      } else {
        vm.zIndex = 1
        vm.isall = true
        if (vm.zoom === '9') {
          vm.btntop = '-120px'
          vm.btnright = '-900px'
        } else {
          vm.btntop = '-120px'
          vm.btnright = '-1200px'
        }
        vm.btntext = '恢复'
        vm.$emit('showall', false)
        // vm.amap.setZoomAndCenter(9, [119.353576, 29.887459])
        vm.initMap()
      }
    },
    initMap () {
      let vm = this
      vm.isbkg = true
      let zoom = parseFloat(vm.zoom)
      vm.amapGs = new AMap.Map('container', {
        viewMode: '3D',
        mapStyle: 'amap://styles/ed3949fcc58f08e9e8b692f949c6137d',
        pitch: 60,
        features: ['bg', 'road'],
        zoom: zoom, // 13
        center: [119.353576, 29.887459],
        skyColor: '#05388f'
      })
      let map = vm.amapGs
      let buildlayers = new AMap.Buildings({
        zooms: [15, 18],
        zIndex: 10,
        heightFactor: 2 // 2倍于默认高度，3D下有效
      })
      map.add(buildlayers)
      // 设置光照
      map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5)
      map.DirectionLight = new AMap.Lights.DirectionLight([0, 0, 1], [1, 1, 1], 1)

      let object3Dlayer = new AMap.Object3DLayer()
      map.add(object3Dlayer)
      let overlayGroups = null
      // let prism = null
      let heatlayer = null
      let bounds = null
      let height = 2000
      let colorList = ['#1890ffbb', '#00e2febb', '#ffea7fbb', '#0054e5bb', '#81e6b3bb', '#4c6affbb', '#7e73ffbb', '#a694ffbb', '#fb6c84bb', '#91dcf2bb', '#11c9aabb', '#40bfffbb', '#ffb686bb']

      vm.amapGs.on("complete", function() {
        vm.isbkg = false
        vm.axios.get(`${process.env.BASE_URL}json/mapdatagongshu.json`, {
          baseURL: ''
        }).then((resp) => {
          // console.log('data', resp.data)
          for(let key  in vm.citys){
            let item = vm.citys[key]
            let color = colorList[item.index] // rgba
            if (item.name === '拱墅区') {
              new AMap.DistrictSearch({
                subdistrict: 0,   //返回下一级行政区
                extensions: 'all',  //返回行政区边界坐标组等具体信息
                level: 'city'  //查询行政级别为 市
              }).search('拱墅区', function (status, result) {
                bounds = result.districtList[0].boundaries
                let prism = new AMap.Object3D.Prism({
                  path: bounds,
                  height: height,
                  color: color
                })
                prism.transparent = true
                item.prism = prism
                object3Dlayer.add(prism)

                let xuequpolygon = []
                let xuequpath = []
                resp.data.xuequmap.forEach((item, index) => {
                  let b = []
                  item.lnglat.forEach(i => {
                    let a = new AMap.LngLat(i[0], i[1])
                    b.push(a)
                  })
                  xuequpath[index] = b
                  xuequpolygon[index] = new AMap.Polygon({
                    path: xuequpath[index],
                    strokeColor: "#07ffff",
                    fillOpacity: 0.5,
                    fillColor: '#07ffff'
                  });
                })
                overlayGroups = new AMap.OverlayGroup(xuequpolygon)
              })
            } else {
              new AMap.DistrictSearch({
                subdistrict: 0,   // 返回下一级行政区
                extensions: 'all',  // 返回行政区边界坐标组等具体信息
                level: 'city'  // 查询行政级别为 市
              }).search(item.name, function (status, result) {
                let bounds = result.districtList[0].boundaries
                let prism = new AMap.Object3D.Prism({
                  path: bounds,
                  height: height,
                  color: color
                })
                prism.transparent = true
                item.prism = prism
                object3Dlayer.add(prism)
              })
            }

            let text = new AMap.Text({
              text: item.name + '</br>',
              verticalAlign: 'bottom',
              position: item.lnglat,
              height: height,
              style: {
                'background-color': 'transparent',
                'text-align': 'center',
                'border': 'none',
                'color': 'white',
                'font-size': '12px',
                'font-weight': 600
              }
            })
            text.setMap(map)
            text.setExtData(item)
            text.on('click', (ev) => {
              let aa = ev.target.getExtData()
              vm.curArea = aa.name
              for(let key in vm.citys){
                object3Dlayer.remove(vm.citys[key].prism)
              }
              object3Dlayer.add(item.prism)
              if (vm.curArea === '拱墅区') {
                heatlayer.show()
              } else {
                heatlayer.hide()
              }
              map.setZoomAndCenter(item.zoom, aa.lnglat)
            })
          }
          // debugger
          let scene = new L7.Scene({
            zoomControl: false,
            scaleControl: false,
            attributionControl: false,
            mapStyle: 'amap://styles/ed3949fcc58f08e9e8b692f949c6137d',
            map: vm.amapGs
          })
          scene.on('loaded', function() {
            heatlayer = scene.HeatmapLayer({
              zIndex: 2
            }).source(resp.data.xuexiaodata, {
              parser: {
                type: 'json',
                x: 'lng',
                y: 'lat'
              },
              transforms: [{
                type: 'hexagon',
                size: 150,
                field: 'xsrs19',
                method: 'sum'
            }]}).size('sum', function(value) {
              return value * 2;
            }).shape('hexagonColumn').style({
              coverage: 0.8,
              angle: 0
            }).color('sum', ["#fb6c84", "#ffea7f", "#00e2fe"]).render()

            heatlayer.on('click', function(feature) {
              map.setZoom(15)
              map.setCenter([feature.lnglat.lng, feature.lnglat.lat])
            })

            let spots = []
            let zoomStyleMapping2 = { 14:0, 15:0, 16:1, 17:1, 18:1, 19:1, 20:1 }
            let touristSpots = resp.data.xuexiaodata
            for(var i=0; i<touristSpots.length; i+=1){
              var marker = new AMap.ElasticMarker({
                position:touristSpots[i].position,
                zooms:[15, 20],
                styles:[{
                  icon:{
                    img: imgs, // touristSpots[i].smallIcon,
                    size:[16, 16],//可见区域的大小
                    ancher:[8, 16],//锚点
                    fitZoom:14,//最合适的级别
                    scaleFactor: 2,//地图放大一级的缩放比例系数
                    maxScale: 2,//最大放大比例
                    minScale: 1//最小放大比例
                  },
                  label:{
                    content:touristSpots[i].name,
                    offset:[-40,0],
                    position: 'BM',
                    minZoom: 15
                  }},{
                  icon:{
                    img: imgs, // touristSpots[i].bigIcon,
                    size:touristSpots[i].size,
                    ancher:touristSpots[i].ancher,
                    fitZoom:17.5,
                    scaleFactor:2,
                    maxScale:2,
                    minScale:0.125
                  },
                  label:{
                    content:touristSpots[i].name,
                    offset: [-40, 0],
                    position:'BM'
                  }
                }],
                data: '33333',
                zoomStyleMapping:zoomStyleMapping2
              })
              marker.setExtData(touristSpots[i])
              marker.on('click',function(e){
                let m = e.target.getExtData()
                vm.$emit('selectSchool', m)
              })
              spots.push(marker)
            }
            map.add(spots)
            // new L7.Control.Zoom({
            //   position: 'topright'
            // }).addTo(scene)
          })
          map.on('zoomchange', () => {
            let zoom = map.getZoom()
            if (zoom >= 15) {
              for(let key in vm.citys){
                object3Dlayer.remove(vm.citys[key].prism)
              }
              map.add(overlayGroups)
              heatlayer.hide()
            } else if (zoom >= 10) {
              if (vm.curArea !== '杭州市') {
                object3Dlayer.add(vm.citys[vm.curArea].prism)
              } else {
                for(let key in vm.citys){
                  object3Dlayer.add(vm.citys[key].prism)
                }
              }
              map.remove(overlayGroups)
              vm.$emit('selectSchool', false)
              if (vm.curArea === '拱墅区' || vm.curArea === '杭州市') {
                heatlayer.show()
              }
            } else {
              vm.curArea = '杭州市'
              for(let key in vm.citys){
                object3Dlayer.add(vm.citys[key].prism)
              }
              heatlayer.show()
              // map.setZoomAndCenter(9, [119.353576, 29.887459])
            }
          })
        }).catch((err) => {
          console.log(err)
        })
      })
    },
    handleTouchMove () {}
  }
}
</script>

<style>
.map {
  width: 100%;
  height: 100%;
}
.amap-marker-label{
  font-size: 24px;
  line-height: 24px;
  text-align: center;
  height: 36px;
  color: "#fff";
  border-radius: 15px;
  background-color: rgba(255,255,255,0.4);
  border: solid 2px rgba(100,255,200,0.8);
}
.mapbkg {
  background: rgba(0, 17, 64, 1);
}
.mapclass {
  width: 1920px;
  height: 1080px;
  top: -190px;
  left: -20px;
}
.mapbutton {
  position:absolute;
  font-size: 16px;
  margin: 10px;
  z-index: 1;
  padding: 5px 10px;
  border: 2px solid #0469f1;
  border-radius: 5px;
  color: #00a7fe;
  cursor: pointer;
}
.mapbutton:hover {
  color: #07ffff;
}
</style>
